<template>
    <div>
        <div class="header">
            <van-nav-bar
                title="新闻详情"
                left-text="返回"
                left-arrow
                @click-left="goBack"
            />
        </div>
        <div class="content">
            <div class="title">{{news_detail.title}}</div>
            <div class="msg">
                <div class="author" v-if='news_detail.baseUser'>{{news_detail.baseUser.realname}}</div>
                <div class="author" v-else>佚名</div>
                <div class="publish_time">{{news_detail.publishTime | dateFMT}}</div>
            </div>
            <div class="detail" v-html="news_detail.content"></div>
            <div class="read">
                <img src="../assets/look.png" alt="">
                <span>{{news_detail.readTimes}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '../http/axios'
import moment from 'moment'
export default {
    data() {
        return {
            news_detail:{}
        }
    },
    // 过滤器
    filters: {
        // 处理日期格式
        dateFMT(str) {
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    created() {
        this.find_detail()
    },
    methods: {
        goBack() {
            // this.$router.push({path:'/'})
            // 等价于
            this.$router.go(-1)
        },
        /**
         * 根据id查询新闻详情
         * 参数：新闻id
         * 获取方式：从浏览器的地址栏上获取
         *  this.$route.query.id
         */
        find_detail() {
            var val = {
                id:this.$route.query.id
            }
            axios({
                url:'http://39.96.21.48:8001/article/findById',
                method:'get',
                params:val
            }).then((res)=>{
                this.news_detail = res.data.data
            })
        }
    }
}
</script>

<style scoped>
    .read span {
        float: right;
    }
    .read img {
        height: 15px;
        width: 15px;
        float: right;
    }
    .read {
        text-align: end;
        font-size: 12px;
        color: #999;
    }
    .detail {
        margin-top: 10px;
        text-indent: 2em; /* 首行缩进，2em表示缩进两个字 */
    }
    .msg div {
       float: left;
       margin-right: 5px;
       height: 18px;
       line-height: 18px; /* 文字的垂直居中，取值为容器的高度 */
    }
    .msg {
        font-size: 12px;
        color: #999;
        overflow: hidden; /* 清除浮动 */
    }
    .title {
        text-align: center;
        font-weight: 700;
    }
    .content {
        margin: 5px 20px;
    }
</style>